<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="能源管理—驾驶舱2"></Header>

    <div class="container">
      <section class="box">
        <ContentBox :height="'450px'">
          <Chart1></Chart1>
        </ContentBox>
        <ContentBox style="margin-top: 30px;flex: 1;">
          <Chart2></Chart2>
        </ContentBox>
      </section>
      <section class="box">
        <ContentBox :height="'255px'">
          <Chart3></Chart3>
        </ContentBox>

        <ContentBox style="margin-top: 16px;flex: 1;">
          <Chart4></Chart4>
        </ContentBox>

        <ContentBox :height="'308px'" style="margin-top: 16px;">
          <Chart5></Chart5>
        </ContentBox>
      </section>

      <section class="btns">
        <div :class="index === currentIndex ? 'btn active' : 'btn'" v-for="index in 5" :key="index" @click="currentIndex = index">导航切换</div>
      </section>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import ContentBox from "./components/content-box.vue";
import Chart1 from "./components/chart1.vue";
import Chart2 from "./components/chart2.vue";
import Chart3 from "./components/chart3.vue";
import Chart4 from "./components/chart4.vue";
import Chart5 from "./components/chart5.vue";

export default {
  name: "Cockpit",
  components: {
    Header,
    ContentBox,
    Chart1,
    Chart2,
    Chart3,
    Chart4,
    Chart5,
  },
  data() {
    return {
      currentIndex: 1,
    };
  },

  computed: {},

  mounted() {},
  beforeUnmount() {},
};
</script>
<style lang="less" scoped>
.bg {
  // padding: 0 20px 20px;
  background: url("../../../assets/img/背景.png") no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;

    .box {
      width: 414px;
      height: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      z-index: 1;
      overflow: hidden;
    }

    .btns {
      position: absolute;
      bottom: 30px;
      width: 100%;
      height: 46px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 0;

      .btn {
        width: 115px;
        height: 40px;
        margin-left: 30px;
        background: url("../../../assets/img/组 8 拷贝.png");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 400;
        color: #fefefe;
        cursor: pointer;

        &:first-child {
          margin-left: 0;
        }
      }

      .active {
        background: url("../../../assets/img/组 8.png");
        font-size: 18px;
        font-weight: bold;
        color: #ffffff;
      }
    }
  }
}
</style>
